<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>通告管理</el-breadcrumb-item>
      <el-breadcrumb-item>通告列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片-->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容"  clearable >
            <el-button slot="append" icon="el-icon-search" ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addBtn">添加通告</el-button>
        </el-col>
      </el-row>

      <!--通告表格-->
      <el-table :data="listForm" stripe border style="width: 100%">
        <el-table-column prop="noticeId" label="ID" width="80"></el-table-column>
        <el-table-column prop="title" label="通告标题" width="180"></el-table-column>
        <el-table-column prop="type" label="通告类型">
          <template slot-scope="scope">
            <el-tag type="success" size="mini" v-if="scope.row.type === 1">公开</el-tag>
            <el-tag type="warning" size="mini" v-if="scope.row.type === 0">非公开</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="日期" width="180">
          <template slot-scope="scope">
            {{scope.row.createDate | dateFormat}}
          </template>
        </el-table-column>
        <!--操作-->
        <el-table-column  label="操作">
          <template slot-scope="scope">
            <el-tooltip :enterable="false" effect="dark" content="编辑通告" placement="top">
              <el-button type="success" icon="el-icon-edit" size="mini" @click="editBtn(scope.row.noticeId)"></el-button>
            </el-tooltip>
            <el-tooltip :enterable="false" effect="dark" content="删除通告" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="delBtn(scope.row.noticeId)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!--分页区域-->
      <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[1, 2, 5, 10]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  import {noticeHttp} from 'network/notice'

  export default {
    data() {

      return {
        pageNum: 1,
        pageSize: 10,
        total: 1,
        listForm: [],
      };
    },
    methods: {

      //监听当前页的事件
      handleCurrentChange(pageIndex){
        console.log(pageIndex);
        this.pageNum = pageIndex;
        noticeHttp.listPage(this.pageNum,this.pageSize).then(res => {
          this.listForm = res.data.list;
          this.total = res.data.total;
          this.pageNum = res.data.pageNum;
        });
      },

      //监听当前页的条数事件
      handleSizeChange(pageIndex){
        console.log(pageIndex);
        this.pageSize = pageIndex;
        noticeHttp.listPage(this.pageNum,this.pageSize).then(res => {
          this.listForm = res.data.list;
          this.total = res.data.total;
          this.pageNum = res.data.pageNum;
        });
      },

      //添加按钮
      addBtn(){
        this.$router.replace('/notice/add')
      },

      //编辑按钮
      editBtn(noticeId) {
        this.$router.replace('/notice/edit/' + noticeId)
      },

      //删除用户
      delBtn(noticeId) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //确认操作
          noticeHttp.del(noticeId).then(res=>{
            if (res.code === 20000){
              this.$message.success(res.message)
              //刷新数据
              this.initList()
            } else{
              this.$message.error(res.message)
            }
          });
        })
      },

      //初始化列表页面
      initList(){
        noticeHttp.listPage(this.pageNum,this.pageSize).then(res => {
          this.listForm = res.data.list;
          this.total = res.data.total;
          this.pageNum = res.data.pageNum;
        })
      },

    },
    created(){
      //初始化用户列表
      this.initList()
    }
  }
</script>

<style scoped>

</style>
